<template>
  <div class='w100 foot' v-show="footerFlag" :key="footerFlag+'footer'">
    <van-tabbar
      class='foot-tabber'
      v-model='active'
      active-color='#426F42'
      inactive-color='#000'
      route
    >
      <van-tabbar-item
        :to='{ name: foot.name, params: {...foot.params} }'
        v-for='(foot, i) in foots'
        :icon='foot.vicon'
        :key='i'
        :info="foot.name === 'Shopcart'?cartNum:''"
      >
        {{ foot.txt }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import http from '@/utils/axios'
import { mapState, mapMutations } from 'vuex'
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar).use(TabbarItem)

export default {
  data () {
    return {
      active: 0,
      foots: [
        {
          txt: '首页',
          name: 'Home',
          icon: '&#xe62a',
          vicon: 'home-o'
        },
        {
          txt: '分类',
          name: 'Classify',
          icon: '&#xe778',
          vicon: 'apps-o'
        },
        {
          txt: '购物车',
          name: 'Shopcart',
          icon: '&#xe614',
          vicon: 'shopping-cart-o'
        },
        {
          txt: '我的',
          name: 'Now-soon',
          params: { nowsoon: 'nowPlaying' },
          icon: '&#xe60c',
          vicon: 'user-circle-o'
        }
      ]
    }
  },
  computed: {
    ...mapState('footerModule', ['footerFlag', 'cartNum'])
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERCART'])
  },
  mounted () {
    if (sessionStorage.userInfo) {
      const token = JSON.parse(sessionStorage.userInfo).token
      if (token) {
        // console.log('一登录')
        http({
          url: '/vant/cart',
          method: 'POST',
          data: { user: token }
        }).then(res => {
          if (res.data.code === 200) {
            const num = res.data.result.map(item => {
              return item.selectedNum
            }).reduce((a, b) => a * 1 + b * 1)
            this.FOOTERCART(num)
          }
        })
      }
    }
  }
}
// 自带route(默认false)和to实现跳转,不用自己监听active的值
</script>

<style lang='scss' scoped>

</style>
